<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请输入设备号">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="12" nzMd="7" nzLg="7" nzXl="3" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'">
      <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
      <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search">
        <i nz-icon nzType="search" nzTheme="outline"></i>查询
      </button>
<!--      <button (click)="exportCsv()" *ngIf="!isMobile" nz-button nzType="primary" style="margin-left: 10px" class="button_search">-->
<!--        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出-->
<!--      </button>-->
<!--      <button (click)="exportCsv()" *ngIf="isMobile" nz-button style="margin-top: 5px"  nzBlock nzType="primary" class="button_search">-->
<!--        <i nz-icon nzType="to-top" nzTheme="outline"></i>导出-->
<!--      </button>-->
    </div>
  </div>
</form>
<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable  [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
    <tr>
      <th>设备编号</th>
      <th>设备类型</th>
      <th>合作伙伴</th>
      <th>场地</th>
      <th>运营商</th>
      <th>单价类型</th>
      <th>单价</th>
      <th>交易总额</th>
      <th>首次使用日期</th>
      <th>应缴费日期</th>
      <th>时间</th>
      <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">操作</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis>{{data.deviceNo}}</td>
        <td nzEllipsis>{{data.deviceTypeName}}</td>
        <td nzEllipsis>{{data.agencyName}}</td>
        <td nzEllipsis>{{data.storeName}}</td>
        <td nzEllipsis>
          <div>{{data.username}}</div>
          <div>{{data.name}}</div>
        </td>
        <td nzEllipsis>
          <div *ngIf="data.defaultMode==1">年单价</div>
          <div *ngIf="data.defaultMode==2">月单价</div>
        </td>
        <td nzEllipsis>{{data.unitPrice}}</td>
        <td nzEllipsis>{{data.totalTransactionAmount}}</td>
        <td nzEllipsis>{{data.dateOfFirstUse | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td nzEllipsis>{{data.dueDate | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td nzEllipsis>{{data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR">
          <a><i nz-icon nzType="delete" nzTheme="outline" style="margin-left: 30px" [nzTheme]="'twotone'" [nzTwotoneColor]="'#ff0000'" (click) = "del(data.id)"></i></a>
        </td>
      </tr>
    </ng-container>
    </tbody>
  </nz-table>
</div>
